<template>
  <van-nav-bar :title="t('home.title')" placeholder fixed @click-right="onClickRight">
    <template #right>
      <van-icon name="manager-o" size="22"/>
    </template>
  </van-nav-bar>

  <van-cell-group class="mt-2">
    <van-cell :title="t('home.outbound')"></van-cell>
    <van-grid :gutter="10" :column-num="3" :border="false">
      <van-grid-item :text="t('home.pick')" to="pick">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/pick.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('home.outboundScan')" to="outboundScan">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/outboundScan.png"/>
        </template>
      </van-grid-item>
    </van-grid>
  </van-cell-group>

  <van-cell-group class="mt-2">
    <van-cell :title="t('home.inbound')"></van-cell>
    <van-grid :gutter="10" :column-num="3" :border="false">
      <van-grid-item :text="t('home.inboundScan')" to="inboundScan">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/inboundScan.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('home.putShelvesScan')" to="shelveScan">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/putShelvesScan.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('home.refundScan')" to="refundScan">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/refundScan.png"/>
        </template>
      </van-grid-item>
    </van-grid>
  </van-cell-group>

  <van-cell-group class="mt-2">
    <van-cell :title="t('home.stock')"></van-cell>
    <van-grid :gutter="10" :column-num="3" :border="false">
      <van-grid-item :text="t('home.skuScan')" to="skuScan">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/skuScan.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('home.checkScan')" to="check">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/checkScan.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('home.moveStock')" to="shiftoutTheWarehouse">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/moveStock.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('home.cutOffScan')" to="page">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/cutOffScan.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('destruction.destruction')" to="destruction">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/destruction.png"/>
        </template>
      </van-grid-item>
    </van-grid>
  </van-cell-group>

  <van-cell-group class="mt-2">
    <van-cell :title="t('home.FBO')"></van-cell>
    <van-grid :gutter="10" :column-num="3" :border="false">
      <van-grid-item :text="t('home.FBO_outboundScan')">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/pick.png"/>
        </template>
      </van-grid-item>
      <van-grid-item :text="t('home.FBO_putShelvesScan')">
        <template #icon>
          <img class="px-7 pb-1" src="@/assets/outboundScan.png"/>
        </template>
      </van-grid-item>
    </van-grid>
  </van-cell-group>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import router from "@/router";
import { localStorage } from "@/utils/local-storage";
import {  STORAGE_USER_DATA_KEY } from '@/stores/mutation-type'

const { t } = useI18n();
const data = localStorage.get(STORAGE_USER_DATA_KEY)
const userData = ref({})
if (!data) {
  router.push("/login");
} else {
  userData.value = { ...data }
}
const VERSION = ref('')
const init = async () => {
  VERSION.value = 'version 1.0'
};
init();

const onClickRight = () => {
  router.push({
    path: "/user",
  });
};
</script>

<style lang="less" scoped>
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-grid-item__text) {
  font-size: 1rem;
}

:deep(.van-cell__title) {
  font-weight: bold;
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

.quick-operation {
  padding: 10px 0;

  :deep(.van-grid-item__content) {
    background: #00a8e5;
    border-radius: 10px;
    height: 70px;
  }

  :deep(.van-grid-item__text) {
    color: #ffffff;
  }
}
</style>
